<template>
  <div class="editCompanys">
    <el-form :model="companysForm" :rules="companysRules" ref="ruleForm" label-width="100px">
      <el-form-item label="企业简称" prop="shortName">
        <el-input v-model="companysForm.shortName"></el-input>
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="companysForm.company"></el-input>
      </el-form-item>
      <!-- <el-form-item label="城市：" prop="province">
        <el-cascader
          v-model="currentData.province"
          :options="Citydata"
          :props="{ expandTrigger: 'hover' }"
        ></el-cascader>
      </el-form-item>-->
      <el-form-item label="标签" prop="tags">
        <el-input v-model="companysForm.tags"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="companysForm.remarks"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelBtn('ruleForm')">取 消</el-button>
      <el-button type="primary" @click="confirmBtn('ruleForm')">确 定</el-button>
    </span>
  </div>
</template>

<script>
// 引入省市联动
// import Citydata from '@/views/companys-adm/citydata';

// 引入修改方法
import { editCompanys } from '@/assets/api/companys';
export default {
  name: 'editCompanys',
  components: {},
  props: {
    currentData: {
      type: [Object, String],
      required: true,
    },
  },
  created() {
    this.companysForm = this.currentData;
    if (this.companysForm.isFamous === 1) {
      this.companysForm.isFamous = true;
    } else {
      this.companysForm.isFamous = false;
    }
  },
  data() {
    return {
      // Citydata,
      // 修改后的用户列表数据
      companysForm: {
        id: this.currentData.id,
        number: this.currentData.number,
      },
      // 用户列表数据的校验规则
      companysRules: {
        shortName: [
          { required: true, message: '请输入企业简称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
        ],
        company: [
          { required: true, message: '请输入所属公司', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
        ],
        tags: [
          { required: true, message: '请输入所属公司', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    // 取消按钮的事件
    cancelBtn(ruleForm) {
      this.$refs[ruleForm].resetFields();
      // 关闭对话框
      this.$emit('close');
    },
    // 确定按钮的事件
    confirmBtn(ruleForm) {
      // 进行表单验证
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          // 发送请求
          try {
            await editCompanys(this.currentData.id, this.companysForm);

            // 告诉父元素
            this.$emit('editData');
          } catch (err) {
            this.$message('请求失败')
          }
        } else {
          return false;
        }
      });
      // 关闭对话框
      this.$emit('close');
    },
  },
};
</script>

<style lang='less' scoped>
.editCompanys {
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
